<template>
	<view class="complaint" :style="{paddingTop: safeArea_top + 'px'}">
		<view class="head">
			<view class="back" @click="back">
				<uni-icons type="arrow-left" size="30"></uni-icons>
			</view>
			<view class="title">
				投诉管理
			</view>
			<view></view>
		</view>

		<view class="container">
			<view class="tabs">
				<view class="item" :class="tabCurrent === 0 ? 'active' : ''">全部</view>
				<view class="item" :class="tabCurrent === 1 ? 'active' : ''">处理中</view>
				<view class="item" :class="tabCurrent === 2 ? 'active' : ''">已处理</view>
			</view>

			<view class="content">
				<swiper class="swiper" style="height: 100%;" circular :current="tabCurrent"
					@animationfinish="animationfinish">
					<swiper-item style="overflow: scroll;">
						<view class="swiper-item">
							<view class="item" v-for="item in list">
								<view class="content">
									{{item.content}}
								</view>
								<view v-if="item.reply" class="status success">已处理</view>
								<view v-else class="status info">未处理</view>
							</view>
							<empty v-if="list.length === 0"></empty>
						</view>
					</swiper-item>
					<swiper-item style="overflow: scroll;">
						<view class="swiper-item">
							<view class="item" v-for="item in list">
								<view class="content">
									{{item.content}}
								</view>
								<view v-if="item.reply" class="status success">已处理</view>
								<view v-else class="status info">未处理</view>
							</view>
							<empty v-if="list.length === 0"></empty>
						</view>
					</swiper-item>
					<swiper-item style="overflow: scroll;">
						<view class="swiper-item">
							<view class="item" v-for="item in list">
								<view class="content">
									{{item.content}}
								</view>
								<view v-if="item.reply" class="status success">已处理</view>
								<view v-else class="status info">未处理</view>
							</view>
							<empty v-if="list.length === 0"></empty>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import empty from '@/components/z-no/index.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				safeArea_top: '',
				tabCurrent: 0,
				list: [],
				total: 0,
				page: 1
			}
		},
		onLoad() {
			const safeArea = uni.getStorageSync("safeArea");
			this.safeArea_top = safeArea.top + 15;
			
			this.getFeedbackList()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			animationfinish(e) {
				this.tabCurrent = e.detail.current
				this.getFeedbackList()
			},
			getFeedbackList(){
				uni.showLoading({
					title: 'loading...'
				})
				this.$http
				  .post("api/opinion/opinionList", {page: this.page, limit: 20})
				  .then((res) => {
					// console.log('res=>>=', res);
					if(this.tabCurrent === 1){
						this.list = res.list.filter(item=> item.reply == '') 
					}else if(this.tabCurrent === 2){
						this.list = res.list.filter(item=> item.reply != '')
					}else{
						this.list = res.list
					}
					// console.log("this.list", this.list);
					this.total = res.total
					uni.hideLoading()
				  });
			}
		}
	}
</script>

<style lang="scss">
	.complaint {
		background-color: #fff;
		height: 100vh;

		.head {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 40px;

			.back {
				position: absolute;
				left: 30rpx;
			}

			.title {
				font-size: 32rpx;
				font-weight: 500;
			}
		}

		.container {
			background-color: #f5f6f8;
			height: calc(100% - 40px);

			.tabs {
				padding: 40rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				height: 40px;

				.item {
					margin: 0 30rpx;
				}

				.active {
					color: #38987c;
					font-weight: bold;
				}
			}

			.content {
				height: calc(100% - 40px);

				.swiper {
					.swiper-item {
						height: 100%;
					}
				}
				.item{
					background-color: #fff;
					margin: 20rpx;
					padding: 20rpx;
					border-radius: 16rpx;
					display: flex;
					.content{
						flex: 1;
					}
					.status{
						padding: 15rpx;
						font-size: 26rpx;
					}
					.info{
						background-color: #fdf6ec;
						border-color: #faecd8;
						color: #e6a23c;
					}
					.success{
						background-color: #f0f9eb;
						border-color: #e1f3d8;
						color: #67c23a;
					}
				}
			}
		}
	}
</style>